import React from 'react'
import { Menu, Layout } from 'antd';
import { useDispatch } from 'react-redux';
import { modDrawMode } from '../../../store/actions/mod';
import { SideMenuConfig } from './config';
const { SubMenu } = Menu;
const { Sider } = Layout;
export default function SideMenu() {
  const dispatch = useDispatch();
  return (
    <Sider width={200} style={{
      height: 'calc(100vh - 50px)',
      minWidth: '50px'
    }}>
      <Menu
        mode="inline"
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        style={{ height: '100%', borderRight: 0 }}
      >
        {
          SideMenuConfig.map((item, index) => {
            if (item?.children) {
              return (
                <SubMenu key={item?.type || index} title={item?.name}>
                  {
                    item?.children.map((childItem, childIndex) => (
                      <Menu.Item key={childItem?.type || childIndex} onClick={() => dispatch(modDrawMode(childItem?.type))}>{childItem?.name}</Menu.Item>
                    ))
                  }
                </SubMenu>
              )
            }
            return null;
          })
        }
        {/* <SubMenu key="pt" title="点">
          <Menu.Item key="drawpt" onClick={()=>dispatch(modDrawMode(drawType.type))}>绘制点</Menu.Item>
        </SubMenu>
        <SubMenu key="line" title="线段">
          <Menu.Item key="drawline" onClick={()=>dispatch(modDrawMode())}>绘制线段</Menu.Item>
        </SubMenu>
        <Menu.Item key="cancel">撤回</Menu.Item> */}
      </Menu>
    </Sider>

  )
}
